<template>
	<view class="body">
		<input type="number" class="uni-input common-input" placeholder="输入手机号" v-model="phone" :disabled="isbind" />
		<view class="login-input-box" v-if="!isbind">
			<input type="text" password="" class="uni-input common-input forget-input" placeholder="请输入验证码" v-model="checknum" />
			<view class="forget-pwd m-f-jcc login-font-color" @tap="getCheckNum">
				<view class="phone-code m-f-jcc">{{!codetime ? '获取验证码' : codetime+' s'}}</view>
			</view>
		</view>
		<button type="default" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable': disabled}" @tap="submit" :disabled="disabled || isbind">{{isbind?'已绑定':'立即绑定'}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isbind: false,
				disabled: true,
				loading: false,
				phone: '',
				checknum: '',
				codetime: 0,
			}
		},
		onLoad(e) {
			if (e.phone !== 'false' && e.phone && e.phone !== 'null') {
				this.isbind = true
				this.phone = e.phone
			}
		},
		watch: {
			phone(val) {
				this.onBtnChange()
			},
			checknum(val) {
				this.onBtnChange()
			},
		},
		methods: {
			isPhone() { // 验证手机号码
				let mPattern = /^1[34578]\d{9}$/
				return mPattern.test(this.phone)
			},
			async getCheckNum() { // 获取验证码
				if (this.codetime > 0) return
				// 验证手机号合法性
				if (!this.isPhone()) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				}
				// 请求服务器，发送验证码
				let [err, res] = await this.$http.post('/user/sendcode', {
					phone: this.phone
				})
				// 请求失败错误处理
				this.$http.errorCheck(err, res)
				if (res.data.errCode === 30001) return
				// 发送成功，开启倒计时
				this.codetime = 60
				let timer = setInterval(() => {
					this.codetime --
					if (this.codetime < 1) {
						clearInterval(timer)
						this.codetime = 0
					}
				}, 1000)
			},
			onBtnChange() { // 改变按钮状态
				if (this.phone && this.checknum) {
					this.disabled = false
					return
				}
				this.disabled = true
			},
			async submit() { // 提交
				let [err, res] = await this.$http.post('/user/bindphone', {
					phone: this.phone,
					code: this.checknum
				}, {}, { token: true, checkToken: true })
				// 请求失败处理
				if (!this.$http.errorCheck(err, res)) return
				// 成功
				this.isbind = true
				this.disabled = false
				uni.showToast({
					title: '绑定成功'
				})
			  // 修改状态，保存缓存
				let data = res.data.data
				if (typeof data === 'boolean') {
					this.User.userinfo.phone = this.phone
				} else {
					// 当前用户之前 手机号注册一个用户
					// 微信登录 未绑定
					this.User.userinfo = this.User.__formatUserinfo(data)
				}
				uni.setStorageSync('userinfo', this.User.userinfo)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import  '../../common/form.css';
	.login-input-box {
		position: relative;
		.phone-input {
			padding-left: 100rpx;
		}
		.forget-input {
			padding-right: 150rpx;
		}
		.forget-pwd {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 150rpx;
			z-index: 100;
		}
		.phone-code {
			background: #EEEEEE;
			border-radius: 10rpx;
			font-size: 25rpx;
			width: 150rpx;
			padding: 10rpx 0;
		}
	}
</style>
